<template>
    <VueDataUi component="VueUiDonut" :config="config" :dataset="dataset"/>
</template>
<script setup>
import { ref, computed } from "vue";
import { VueDataUi } from "vue-data-ui";
import "vue-data-ui/style.css"; // If you are using multiple components, place styles import in your main
const props = defineProps({
    axisPieValueName: { 
        type: Array,
        default: () => ['河南亚航','河南陆海']
    },
    axisPieValue: { 
        type: Array,
        default: () => [1,2]
    }

})

const config = ref({
        type: 'classic',
        responsive: false,
        theme: '',
        customPalette: [],
        useCssAnimation: true,
        serieToggleAnimation: {
            show: true,
            durationMs: 500
        },
        startAnimation: {
            show: true,
            durationMs: 1000,
            staggerMs: 50
        },
        useBlurOnHover: true,
        userOptions: {
            show: true,
            showOnChartHover: true,
            keepStateOnChartLeave: true,
            position: 'right',
            buttons: {
                tooltip: false,
                pdf: true,
                csv: false,
                img: true,
                table: false,
                labels: false,
                fullscreen: true,
                sort: false,
                stack: false,
                animation: false,
                annotator: true
            },
            buttonTitles: {
                open: 'Open options',
                close: 'Close options',
                tooltip: 'Toggle tooltip',
                pdf: '下载图表为PDF格式',
                csv: 'Download CSV',
                img: '下载图表为PNG格式',
                table: 'Toggle table',
                labels: 'Toggle labels',
                fullscreen: '全屏查看图表',
                annotator: '图表批注'
            },
            print: {
                allowTaint: false,
                backgroundColor: '#FFFFFFff',
                useCORS: false,
                onclone: null,
                scale: 2,
                logging: false
            }
        },
        translations: {
            total: 'Total',
            average: 'Average'
        },
        table: {
            show: false,
            responsiveBreakpoint: 400,
            th: {
                backgroundColor: '#FFFFFFff',
                color: '#1A1A1Aff',
                outline: 'none'
            },
            td: {
                backgroundColor: '#FFFFFFff',
                color: '#1A1A1Aff',
                outline: 'none',
                roundingValue: 0,
                roundingPercentage: 0
            },
            columnNames: {
                series: 'Series',
                value: 'Value',
                percentage: 'Percentage'
            }
        },
        style: {
            fontFamily: 'inherit',
            chart: {
                useGradient: true,
                gradientIntensity: 40,
                backgroundColor: '#FFFFFFff',
                color: '#1A1A1Aff',
                padding: {
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0
                },
                layout: {
                    curvedMarkers: true,
                    labels: {
                        dataLabels: {
                            show: true,
                            useLabelSlots: false,
                            hideUnderValue: 3,
                            prefix: '',
                            suffix: ''
                        },
                        value: {
                            rounding: 0,
                            show: true,
                            formatter: null
                        },
                        percentage: {
                            color: '#1A1A1Aff',
                            bold: false,
                            fontSize: 10,
                            rounding: 0,
                            formatter: null
                        },
                        name: {
                            color: '#1A1A1Aff',
                            bold: false,
                            fontSize: 10
                        },
                        hollow: {
                            show: false,
                            total: {
                                show: false,
                                bold: false,
                                fontSize: 16,
                                color: '#AAAAAAff',
                                text: '总计',
                                offsetY: 0,
                                value: {
                                    color: '#1A1A1Aff',
                                    fontSize: 14,
                                    bold: true,
                                    suffix: '',
                                    prefix: '',
                                    offsetY: 0,
                                    rounding: 0,
                                    formatter: null
                                }
                            },
                            average: {
                                show: false,
                                bold: false,
                                fontSize: 16,
                                color: '#AAAAAAff',
                                text: '平均',
                                offsetY: 0,
                                value: {
                                    color: '#1A1A1Aff',
                                    fontSize: 14,
                                    bold: true,
                                    suffix: '',
                                    prefix: '',
                                    offsetY: 0,
                                    rounding: 0,
                                    formatter: null
                                }
                            }
                        }
                    },
                    donut: {
                        strokeWidth: '80',
                        borderWidth: '0',
                        useShadow: false,
                        shadowColor: '#1A1A1A'
                    }
                },
                comments: {
                    show: true,
                    showInTooltip: true,
                    width: 100,
                    offsetY: 0,
                    offsetX: 0
                },
                legend: {
                    show: true,
                    fontSize:14
                },
                tooltip: {
                    show: true,
                    color: '#1A1A1Aff',
                    backgroundColor: '#FFFFFFff',
                    fontSize: 14,
                    customFormat: null,
                    borderRadius: 4,
                    borderColor: '#e1e5e8',
                    borderWidth: 1,
                    backgroundOpacity: 30,
                    position: 'center',
                    offsetY: 24,
                    showValue: true,
                    showPercentage: true,
                    roundingValue: 0,
                    roundingPercentage: 0
                }
            }
        }
    });

const option = ref([])
const colorPalette = ["#287ff0","#d655d8","#aec7e8","#ff7f0e","#ddcf3c","#8f4728","#2307b0","#20cbae","#6edb00","#be0909"]
const dataset = computed(()=>{ 
    option.value.length = 0
    if(props.axisPieValueName.length > 0){
        props.axisPieValueName.forEach((item,index) => { 
            option.value.push({"name":item,"values":[props.axisPieValue[index]],"color":colorPalette[index]})
        })
    }
    return option
})

const dataset1 = ref([
    {
        name: props.axisPieValueName[0]?props.axisPieValueName[0]:'',
        values: [props.axisPieValue[0]?props.axisPieValue[0]:null],
        color: '#287ff0'
    },
    {
        name: props.axisPieValueName[1]?props.axisPieValueName[1]:'',
        values: [props.axisPieValue[1]?props.axisPieValue[1]:null],
        color: '#aec7e8'
    },
    {
        name: props.axisPieValueName[2]?props.axisPieValueName[2]:'',
        values: [props.axisPieValue[2]?props.axisPieValue[2]:null],
        color: '#ff7f0e'
    },
    {
        name: props.axisPieValueName[3]?props.axisPieValueName[3]:'',
        values: [props.axisPieValue[3]?props.axisPieValue[3]:null],
        color: '#ddcf3c'
    },
    {
        name: props.axisPieValueName[4]?props.axisPieValueName[4]:'',
        values: [props.axisPieValue[4]?props.axisPieValue[4]:null],
        color: '#d655d8'
    },
    {
        name: props.axisPieValueName[5]?props.axisPieValueName[5]:'',
        values: [props.axisPieValue[5]?props.axisPieValue[5]:null],
        color: '#8f4728'
    },
    {
        name: props.axisPieValueName[6]?props.axisPieValueName[6]:'',
        values: [props.axisPieValue[6]?props.axisPieValue[6]:null],
        color: '#2307b0'
    },
    {
        name: props.axisPieValueName[7]?props.axisPieValueName[7]:'',
        values: [props.axisPieValue[7]?props.axisPieValue[7]:null],
        color: '#20cbae'
    },
    {
        name: props.axisPieValueName[8]?props.axisPieValueName[8]:'',
        values: [props.axisPieValue[8]?props.axisPieValue[8]:null],
        color: '#6edb00'
    },
    {
        name: props.axisPieValueName[9]?props.axisPieValueName[9]:'',
        values: [props.axisPieValue[9]?props.axisPieValue[9]:null],
        color: '#be0909'
    }
]);

</script>
